.radio-list-control {
	display: inline-block;
	height: 24px;
	line-height: 0;
	white-space: nowrap;

	li {
		position: relative;
		display: inline-block;
		padding: 0;

		&:not(:last-child) {
			margin-right: -1px;
		}

		&:first-child {
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;

			label {
				border-top-left-radius: 2px;
				border-bottom-left-radius: 2px;
			}
		}

		&:last-child {
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;

			label {
				border-top-right-radius: 2px;
				border-bottom-right-radius: 2px;
			}
		}
	}

	label {
		display: inline-block;
		border: 1px solid $form-border-color;
		line-height: 14px;
		padding: 4px 11px;
		cursor: pointer;

		@if $ui-transitions {
			transition: background-color $ui-controls-transition-duration ease-out;
		}
	}

	input[type="radio"] {
		position: absolute !important;
		top: auto !important;
		width: 1px !important;
		height: 1px !important;
		opacity: 0;

		+ label {
			color: $font-color;
			border-color: $form-border-color;
			background-color: $form-bg-color;

			&:hover {
				background-color: $btn-form-hover-bg-color;
			}

			&:active {
				border-color: $form-border-color;
				background-color: $btn-form-hover-bg-color;
			}
		}

		&:checked + label {
			color: $white;
			-webkit-text-fill-color: $white;
			border-color: $ui-bg-selected-color;
			background-color: $ui-bg-selected-color;
			position: relative;
			z-index: 1;
		}

		&:focus + label {
			box-shadow: 0 0 0 2px $btn-focus-outline-color;
		}

		&[readonly],
		&[disabled] {
			+ label {
				transition: none;
				cursor: default;
				box-shadow: none;
				@extend %form-disabled;
			}

			&:checked + label {
				background-color: lighten($ui-bg-selected-color, 33%);
			}
		}

		&[readonly]:checked + label {
			color: $font-color;
			-webkit-text-fill-color: $font-color;
		}
	}
}
